<template>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 资源管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-button type="primary" icon="el-icon-delete" class="handle-del mr10" @click="batchClose">批量关闭</el-button>
        <el-button type="primary" icon="el-icon-circle-plus-outline" class="ml0 mr10" @click="batchOpen">批量开启</el-button>
        <el-button type="primary" icon="el-icon-circle-plus-outline" class="ml0 mr10" @click="addRole">新增</el-button>

        <el-input v-model="select_pattern" placeholder="筛选关键词" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </div>
      <el-table :data="tableData" border class="table" ref="multipleTable" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="irolename" label="名称"></el-table-column>
        <el-table-column prop="irolecode" label="代码"></el-table-column>

        <el-table-column prop="iroledesc" label="描述"></el-table-column>
        <el-table-column prop="irolestatus" label="状态"></el-table-column>
        <el-table-column prop="iregister" label="创建者"></el-table-column>
        <el-table-column label="操作" width="90" align="center">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <Pagination :paginationData="paginationData" v-on:childrenData="childrenData"></Pagination>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog :title="dialog.title" :visible.sync="dialog.showstatus" width="35%">

      <el-steps :active="dialog.active" simple finish-status="success">
        <el-step title="基本信息"></el-step>
        <el-step title="资源权限"></el-step>

      </el-steps>

      <el-form ref="form" v-show="dialog.active==1" label-position="left" :model="form" label-width="60px">
        <el-form-item label="名称">
          <el-input v-model="form.irolename"></el-input>
        </el-form-item>
        <el-form-item label="代码">
          <el-input v-model="form.irolecode"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.iroledesc"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="form.irolestatus"></el-input>
        </el-form-item>
      </el-form>
      <el-transfer v-show="dialog.active==2"
          filterable

          filter-placeholder="请输入权限名称!"
          v-model="transfer.value"
          :titles="['可选权限', '新角色权限']"
          :data="transfer.data">
        </el-transfer>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.showstatus = false">取 消</el-button>
        <el-button v-show="dialog.active==2" @click="dialog.active=1">上一步</el-button>
        <el-button v-show="dialog.active==1" @click="dialog.active=2;getCurUserSource()">下一步</el-button>
        <el-button v-show="dialog.active==2" type="primary" @click="saveEdit">保 存</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import Pagination from '../base/Pagination.vue'

  export default {
    components: {
      Pagination
    },
    name: "source-list",
    data() {
      return {
        paginationData: {
          total: 0,
          pagesize: 7,
          pagesizes: [7, ],
          currentPage: 1,
          layout: "total, sizes, prev, pager, next, jumper"
        },
        curPage: {
          pagesize: 7,
          currentPage: 1
        },
        tableData: [],
        is_search: false,
        select_pattern: "",
        dialog: {
          title: '',
          showstatus: false,
          active: 1,
        },
        form: {
          iroledesc: '',
          irolename: '',
          irolecode: '',
          irolestatus: '',
          list:[]
        },
        transfer:{
          data:[],
          value:[]
        }
      };
    },
    created() {
      this.getData();
    },
    methods: {

      addRole() {
        this.dialog.showstatus = true;
        this.dialog.title = '新增角色';
      },
      search() {
        if (!this.is_search) {
          this.is_search = true;
          this.curPage.currentPage = 1;
          this.getData();
        }
      },
      saveEdit(){
        let _self = this;
        this.form.list=this.transfer.value;
        debugger
        this.$axios.post("/api/sys/role/addRole",
        _self.form
        )
        .then(function(response){
          if(response.data.status){
            _self.$message.success(
              `角色 ${_self.form.irolename} 添加成功`
            );
            _self.dialog.showstatus=false;
            _self.getData();
          }else{
            _self.$message.error(
              `角色 ${_self.form.irolename} 添加失败`
            );
          }
        })
      },
      getCurUserSource(){
        let _self = this;
        if(this.transfer.data.length>0){
          return;
        }
        this.$axios.get("/api/sys/source/getCurUserSource")
        .then(function(response){
            if(response.data.status === true){
                let tmpdata = response.data.data;
                for(let i=0;i<response.data.data.length;i++){
                  _self.transfer.data.push({
                    key:response.data.data[i].isourcecid,
                    label:response.data.data[i].idesc,
                    disabled:false
                  })
                }
            }
        });
      },
      getData() {
        let _self = this;
        if (!this.is_search) {
          this.select_pattern = "";
        }
        this.$axios
          .get("/api/sys/role/getRoleList", {
            params: {
              pageNum: this.curPage.currentPage,
              pageSize: this.curPage.pagesize,
              select_pattern: this.select_pattern
            }
          })
          .then(function(response) {
            //debugger;
            _self.tableData = response.data.list;
            _self.is_search = false;
            _self.paginationData.total = response.data.total;
          });
      },
      childrenData(childrenData) {
        this.curPage = childrenData;
        this.getData();
      }
    }
  }
</script>

<style scoped>
  .handle-box {
    margin-bottom: 20px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    width: 300px;
    display: inline-block;
  }

  .del-dialog-cnt {
    font-size: 16px;
    text-align: center;
  }

  .table {
    width: 100%;
    font-size: 14px;
  }

  .red {
    color: #ff0000;
  }

  .mr10 {
    margin-right: 10px;
  }

  .ml0 {
    margin-left: 0px;
  }
</style>
